<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>「广州招聘信息」广州招聘网 - BOSS直聘</title>
    <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.png">
    <link rel="stylesheet" href="style/main.css">
</head>
<body>
    <div class="container" id="app">
        <div class="home-header">
            <img src="./images/home-search-text.png" alt="">
            <form action="">
                <input type="text"  placeholder="搜索职位公司" color: #aaa; >
                <button>搜索</button>
            </form>
        </div>
        <div class="home-categories">
            <dl v-for="item in categories">
                <dt>
                    <img :src="item.icon" alt="">
                    <div><h4>{{item.name}}</h4></div>
                </dt>
                <dd>
                    <a :href="tags.href" class="tag"  v-for="tags in item.tags">{{tags.tag}}</a>
                  
                </dd>
            </dl>
        </div>
       
        
        <div class="home-footer">
            <p>违法和不良信息举报邮箱：jubao@kanzhun.com</p>
            <p>企业服务热线和举报投诉：400 065 5799</p>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js" integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68=" crossorigin="anonymous"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                categories:[
                    {
                        icon:'./images/technology.png',
                        name:'技术',
                        tags:[
                            { href:'list.html', tag:'Java'},
                            { href:'detail.html', tag:'PHP'},
                            { href:'index.html', tag:'NodeJS'},
                        ],
                    },
                    {
                        icon:'./images/technology.png',
                        name:'职位',
                        tags:[
                            { href:'list.html', tag:'Java'},
                            { href:'detail.html', tag:'PHP'},
                            { href:'index.html', tag:'NodeJS'},
                        ],
                    },
                    {
                        icon:'./images/technology.png',
                        name:'技术',
                        tags:[
                            { href:'list.html', tag:'Java'},
                            { href:'detail.html', tag:'PHP'},
                            { href:'index.html', tag:'NodeJS'},
                        ],
                    },
                    
                ]
            }
        })
    </script>
</body>
</html>